import React, { useState } from "react"
import "./CommentItem.scss"
import { RightOutline } from "antd-mobile-icons"
import { Icon } from "./Icon"
import dayjs from "dayjs"
import { useDispatch } from "react-redux"
import { handleLikeComment } from "../store/actions"
import { Popup } from "antd-mobile"
import Reply from "../components/Reply"
function CommentItem({ comment }) {
  const dispatch = useDispatch()

  const [replyVisible, setReplyVisible] = useState()
  // 点赞评论
  const likeComment = () => {
    dispatch(handleLikeComment(comment.com_id, comment.is_liking))
  }
  return (
    <div className="item">
      <div className="head">
        <img
          src={
            comment.aut_photo || "http://geek.itheima.net/images/user_head.jpg"
          }
          alt=""
        ></img>
      </div>
      <div className="info">
        <p className="name">
          {comment.aut_name}
          <span onClick={likeComment}>
            {comment.like_count}
            <Icon
              type={comment.is_liking ? "iconbtn_like_sel" : "iconbtn_like2"}
            />
          </span>
        </p>
        <p className="text">{comment.content}</p>
        <p className="reply">
          <span className="reply-title" onClick={() => setReplyVisible(true)}>
            回复 <RightOutline fontSize={12} />
          </span>
          <Popup
            visible={replyVisible}
            position="right"
            onMaskClick={() => {
              setReplyVisible(false)
            }}
            bodyStyle={{ width: "100%", height: "100%" }}
          >
            <Reply
              likeComment={likeComment}
              comment={comment}
              close={() => setReplyVisible(false)}
            />
          </Popup>
          <span className="reply-time">
            {dayjs().to(dayjs(comment.pubdate))}
          </span>
        </p>
      </div>
    </div>
  )
}

export default CommentItem
